<div ng-init="init();" class="kmi-layout-content mobile12-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'mobile12.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content system-info">
        <div class="kmi-row-fields" style="padding: 8px;">
            <div class="column-item">
                <label class="label" ng-bind="'mobile12.loading_time' | translate"></label>
                <label class="value" ng-bind="loading_time"></label>
                <div style="flex: 1;"></div>
                <button class="kmi-button__mobile" ng-click="upDate();" style="flex: 0 0 60px;">
                    <label ng-bind="'mobile12.refresh' | translate"></label>
                    <div class="kmi-can-click"></div>
                </button>
            </div>
        </div>
        <!-- 當月 / 當周 -->
        <div class="kmi-row-fields" style="border-bottom: 1px #cecece solid; justify-content: flex-end; padding-top: 5px;">
            <div class="column-item select-date" style="margin-left: 0px;" ng-class="{'is-select': nowState == 'Month'}">
                <label class="label" ng-bind="'mobile12.month' | translate" ng-click="getOneMonth();"></label>
            </div>
            <div class="column-item select-date" ng-class="{'is-select': nowState == 'Week'}">
                <label class="label" ng-bind="'mobile12.week' | translate" ng-click="getOneWeek();"></label>
            </div>
        </div>
        <!-- 綜合分析資料 -->
        <div class="analysis-data-panel">
            <div class="analysis-data-content">
                <!-- 區域 -->
                <div class="area-data-panel" ng-repeat-start="areaData in areaDataList track by $index" ng-click="openEquipmentData(areaData);">
                    <div class="area-data-left-content">
                        <div class="area-data-item">
                            <label class="label" ng-bind="('mobile12.list.area_no' | translate) + areaData.area_name"></label>
                        </div>
                        <div class="area-data-item">
                            <label class="label" ng-bind="('mobile12.list.arerage_equipment_machining_time' | translate) + areaData.area_time"></label>
                        </div>
                        <div class="area-data-item">
                            <label class="label" ng-bind="('mobile12.list.cumulative_machining_cost' | translate) + areaData.cumulative_cost"></label>
                        </div>
                        <div class="area-data-item">
                            <label class="label" ng-bind="('mobile12.list.expected_machining_cost' | translate) + areaData.expected_cost"></label>
                        </div>
                    </div>
                    <div class="area-data-right-content">
                        <label class="label" ng-bind="'mobile12.list.oee' | translate" style="padding-left: 3px;"></label>
                        <div mdl-piechart datas="areaData.loading_op_qty" config="areaData.pieChart_config"></div>
                        <div class="area-data-pieChart">
                            <i class="material-icons" style="color: #db4b3c" ng-show="areaData.loading_op_qty[0].value == 0">close</i>
                            <label class="value" style="color: #49A8EE" ng-bind="areaData.loading_op_qty[0].value+'%'" ng-show="areaData.loading_op_qty[0].value > 0 && areaData.loading_op_qty[0].value < 100"></label>
                            <i class="material-icons" style="color: #68bd84" ng-show="areaData.loading_op_qty[0].value >= 100">check</i>
                        </div>
                    </div>
                    <div class="kmi-can-click"></div>
                </div>
                <!-- 設備 -->
                <div class="equipment-data-panel" ng-style="areaData.style" ng-repeat="equipmentData in areaData.equipmentData track by $index">
                    <div class="equipment-data-left-content">
                        <div class="equipment-data-item">
                            <label class="label" ng-bind="('mobile12.list.equipment_no' | translate) + equipmentData.equipment_no"></label>
                        </div>
                        <div class="equipment-data-item">
                            <label class="label" ng-bind="('mobile12.list.equipment_name' | translate) + equipmentData.equipment_name"></label>
                        </div>
                        <div class="equipment-data-item">
                            <label class="label" ng-bind="('mobile12.list.equipment_machining_cumulative_time' | translate) + equipmentData.equipment_time"></label>
                        </div>
                        <div class="equipment-data-item">
                            <label class="label" ng-bind="('mobile12.list.cumulative_machining_cost' | translate) + equipmentData.cumulative_cost"></label>
                        </div>
                        <div class="equipment-data-item">
                            <label class="label" ng-bind="('mobile12.list.expected_machining_cost' | translate) + equipmentData.expected_cost"></label>
                        </div>
                    </div>
                    <div class="equipment-data-right-content">
                        <div class="top-percent">
                            <div class="top-percent-item">
                                <div class="top-percent-item-title" style="background: #db4b3c">
                                    <label class="label" ng-bind="'mobile12.list.utilization' | translate"></label>
                                </div>
                                <label class="value" ng-bind="equipmentData.utility_ratio + '%'"></label>
                            </div>
                            <div class="top-percent-item">
                                <div class="top-percent-item-title" style="background: #68bd84">
                                    <label class="label" ng-bind="'mobile12.list.efficiency_ratio' | translate"></label>
                                </div>
                                <label class="value" ng-bind="equipmentData.efficiency_ratio + '%'"></label>
                            </div>
                            <div class="top-percent-item">
                                <div class="top-percent-item-title" style="background: #ea9114">
                                    <label class="label" ng-bind="'mobile12.list.excellent_ratio' | translate"></label>
                                </div>
                                <label class="value" ng-bind="equipmentData.yield + '%'"></label>
                            </div>
                        </div>
                        <div class="bottom-percent">
                            <label class="value" ng-bind="equipmentData.oee + '%'"></label>
                        </div>
                    </div>
                </div>
                <span ng-repeat-end/>
            </div>
        </div>    
    </div>
</div>
